/**
 * @author M_xiaohan
 * @date 2018/4/26
 * @Description:
*/

import React from 'react';
import {
  ListView,
  Flex,
  Card,
  WingBlank,
  WhiteSpace,
  Button,
} from 'antd-mobile';
import { routerRedux } from 'dva/router';
import '../routes/internalTypeDetail.css';

class OrdersListView extends React.Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row2,
    });
    this.state = {
      dataSource,
      isLoading: false,
      height: document.documentElement.clientHeight - 150,
      tabTitle: props.tabData.title,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(nextProps.props.myorders.ordersList), // eslint-disable-line
      isLoading: false,
    });
  }

  onEndReached = () => {
    const Props = this.props.props;
    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }
    this.setState({
      isLoading: true,
    });
    if (Props.myorders.hasNextPage) {
      if (this.state.tabTitle === '全部订单') {
        Props.dispatch({
          type: 'myorders/getListOrder',
          payload: {
            customerId: 1,
            pageNum: Props.myorders.nextPage,
          },
        });
      } else if (this.state.tabTitle === '未审订单') {
        Props.dispatch({
          type: 'myorders/getListOrder',
          payload: {
            customerId: 1,
            pageNum: Props.myorders.nextPage,
            isverify: '0',
          },
        });
      } else if (this.state.tabTitle === '已审订单') {
        Props.dispatch({
          type: 'myorders/getListOrder',
          payload: {
            customerId: 1,
            pageNum: Props.myorders.nextPage,
            isverify: '1',
          },
        });
      }
    } else {
      this.setState({
        isLoading: false,
      });
    }
  }
  cancelOrder = (parms) => {
    const Props = this.props.props;
    Props.dispatch({
      type: 'myorders/cancelOrder',
      payload: parms.id,
    });
  }
  addOrderToCar = (parms) => {
    const Props = this.props.props;
    Props.dispatch({
      type: 'myorders/copyToCar',
      payload: parms.id,
    });
  }
  viewDetails = (parms) => {
    const Props = this.props.props;
    Props.dispatch(routerRedux.push({ pathname: '/myorderdetail', query: { ...parms } }));
  }
  renderButton = (rowData) => {
    if (rowData.isverify === '1') {
      return (
        <Button
          style={{ marginRight: '1%' }}
          type="ghost"
          size="small"
          inline
          onClick={() => this.addOrderToCar(rowData)}
        >再来一单
        </Button>
      );
    } else if (rowData.cancelFlag === '0') {
      return (
        <Button
          type="ghost"
          size="small"
          inline
          onClick={() => this.cancelOrder(rowData)}
        >取消订单
        </Button>
      );
    } else {
      return (
        <div>
          <span style={{ fontWeight: 'bold', color: '#434343', marginRight: 4 }}>备注: </span>
          <span>{rowData.cancelFlag === '1' ? '此订单已取消' : '此订单未取消' }</span>
        </div>
      );
    }
  }
  render() {
    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: '#F5F5F9',
          height: 8,
          borderTop: '1px solid #ECECED',
          borderBottom: '1px solid #ECECED',
        }}
      />
    );
    const row = (rowData) => {
      return (
        <WingBlank size="lg">
          <WhiteSpace size="lg" />
          <Card style={{ color: '#ff6900' }}>
            <Card.Header
              title={<div><div style={{ color: '#434343' }}>订单号:</div><div style={{ color: '#ff6900' }}>{rowData.orderNo}</div></div>}
              extra={<div style={{ color: '#ea0025' }}>{rowData.isverify === '1' ? '已审核' : '未审核' }</div>}
            />
            <Card.Body onClick={() => this.viewDetails(rowData)}>
              <WhiteSpace size="lg" />
              <Flex justify="between">
                <div><span style={{ fontWeight: 'bold' }}>总数:</span> {rowData.lumpSum ? rowData.lumpSum : '待定'}</div>
              </Flex>
              <WhiteSpace size="lg" />
              <Flex justify="between">
                <div><span style={{ fontWeight: 'bold' }}>配送时间：</span> {rowData.distributionDate ? rowData.distributionDate : '待定'}</div>
              </Flex>
              <WhiteSpace size="lg" />
              <Flex justify="between">
                <Flex.Item><span style={{ fontWeight: 'bold' }}>审核人：</span> {rowData.auditor ? rowData.auditor : '暂无'}</Flex.Item>
              </Flex>
              <WhiteSpace size="lg" />
              <Flex justify="between">
                <Flex.Item><span style={{ fontWeight: 'bold' }}>审核时间：</span> {rowData.auditorTime ? rowData.auditorTime : '暂无'}</Flex.Item>
              </Flex>
            </Card.Body>
            <Card.Footer
              style={{
                borderTop: '1px solid #ecebed',
                marginTop: 20,
                padding: 10,
              }}
              content={
                <Flex justify="end">
                  {
                    this.renderButton(rowData)
                  }
                </Flex>
              }
            />
          </Card>
          <WhiteSpace size="lg" />
        </WingBlank>
      );
    };
    return (
      <div style={{ height: '100%' }}>
        <div style={{ position: 'relative' }}>
          <ListView
            dataSource={this.state.dataSource}
            renderFooter={() => (
              <div style={{ padding: 30, textAlign: 'center' }}>
                {this.state.isLoading ? '吃奶的力气加载中...' : '我是有底线的'}
              </div>
              )}
            renderRow={row}
            style={{
                height: this.state.height,
                overflow: 'auto',
              }}
            renderSeparator={separator}
            pageSize={4}
            useBodyScorll
            onEndReached={this.onEndReached}
            onEndReachedThreshold={10}
            horizontal={false}
          />
        </div>
      </div>
    );
  }
}


export default OrdersListView;
